<template>
  <div class="payment-success-page">
    <!-- 背景遮罩 -->
    <div class="overlay"></div>
    
    <!-- 成功弹窗 -->
    <div class="success-modal">
      <!-- 顶部图标 -->
      <div class="success-icon">
        <div class="icon-circle">
          <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#4CAF50" stroke-width="2">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
            <polyline points="22,4 12,14.01 9,11.01"/>
          </svg>
        </div>
      </div>

      <!-- 标题 -->
      <h1 class="modal-title">预约成功</h1>
      
      <!-- 说明文字 -->
      <p class="modal-subtitle">去医院门诊就医时，请提供手机上的预约码</p>

      <!-- 预约信息 -->
      <div class="appointment-info" v-if="appointmentData">
        <div class="info-item">
          <span class="label">预约编号：</span>
          <span class="value">{{ appointmentData.appointmentId }}</span>
        </div>
        <div class="info-item">
          <span class="label">医生：</span>
          <span class="value">{{ appointmentData.appointmentData.doctor.name }}</span>
        </div>
        <div class="info-item">
          <span class="label">就诊人：</span>
          <span class="value">{{ appointmentData.appointmentData.patient?.name }}</span>
        </div>
        <div class="info-item">
          <span class="label">就诊时间：</span>
          <span class="value">{{ formatDateTime(appointmentData.appointmentData.date, appointmentData.appointmentData.time) }}</span>
        </div>
      </div>

      <!-- 按钮组 -->
      <div class="button-group">
        <button class="add-calendar-btn" @click="addToCalendar">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
            <line x1="16" y1="2" x2="16" y2="6"/>
            <line x1="8" y1="2" x2="8" y2="6"/>
            <line x1="3" y1="10" x2="21" y2="10"/>
          </svg>
          添加到日历
        </button>
        <button class="close-btn" @click="closeModal">
          关闭
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

interface AppointmentData {
  appointmentId: string
  appointmentData: {
    date: string
    time: string
    doctor: {
      name: string
    }
    patient?: {
      name: string
    }
  }
  amount: number
}

const appointmentData = ref<AppointmentData | null>(null)

// 格式化日期时间
const formatDateTime = (date: string, time: string) => {
  const dateObj = new Date(date)
  const year = dateObj.getFullYear()
  const month = dateObj.getMonth() + 1
  const day = dateObj.getDate()
  const timeSlot = time.split('-')[1]
  
  return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${timeSlot}`
}

// 添加到日历
const addToCalendar = () => {
  showToast('已添加到日历')
}

// 关闭弹窗
const closeModal = () => {
  router.push('/home')
}

// 轻提示
const showToast = (message: string) => {
  const toast = document.createElement('div')
  toast.className = 'toast-message'
  toast.textContent = message
  document.body.appendChild(toast)
  
  setTimeout(() => toast.classList.add('show'), 10)
  setTimeout(() => {
    toast.classList.remove('show')
    setTimeout(() => {
      if (document.body.contains(toast)) {
        document.body.removeChild(toast)
      }
    }, 300)
  }, 3000)
}

onMounted(() => {
  // 从localStorage获取支付数据
  const storedData = localStorage.getItem('paymentData')
  if (storedData) {
    try {
      appointmentData.value = JSON.parse(storedData)
    } catch (error) {
      console.error('解析支付数据失败:', error)
    }
  }

  // 清理支付数据
  localStorage.removeItem('paymentData')
})
</script>

<style scoped>
.payment-success-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.success-modal {
  position: relative;
  background: white;
  border-radius: 16px;
  padding: 32px 24px;
  margin: 20px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.success-icon {
  margin-bottom: 24px;
}

.icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8F5E8 0%, #F0F9F0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.modal-title {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
}

.modal-subtitle {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 24px;
}

.appointment-info {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  text-align: left;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  color: #666;
}

.value {
  color: #333;
  font-weight: 500;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.add-calendar-btn, .close-btn {
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.add-calendar-btn {
  background: #1877F2;
  color: white;
  border: none;
}

.add-calendar-btn:hover {
  background: #166fe5;
}

.close-btn {
  background: white;
  color: #1877F2;
  border: 1px solid #1877F2;
}

.close-btn:hover {
  background: #f8f9fa;
}

/* Toast 样式 */
.toast-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 1001;
  opacity: 0;
  transition: opacity 0.3s;
}

.toast-message.show {
  opacity: 1;
}
</style> 